<template>
  <panel title="园林环境统计">
    <!--<div class="door-control-content">
      <div class="door" v-for="data in datas">
        <div class="icon"></div>
        <div class="position-state-box">
          <div class="position-name">{{data.name}}</div>
          <div class="position-state" :class="{danger: data.type!==1}">
            <span>{{data.type === 1 ? '正常': '异常'}}</span>
          </div>
        </div>
      </div>
    </div>-->
    <span class="stree-data-create-time" slot="title-extra">（数据更新时间:{{streeCreateTime}}）</span>
    <div>
      <div class="middle-area">
        <x-col class="middle-area-stree" :span="10">
          <x-col :offset="2" :span="10"><div class="stree-div"><img class="stree-img" src="../../../../../static/images/stree.png" alt=""></div></x-col>
          <x-col class="middle-area-stree-status" :offset="2" :span="10">
            <x-row class="middle-area-stree-area">{{streeArea}}</x-row>
            <x-row class="middle-area-stree-online">{{streeOnline}}</x-row>
          </x-col>
        </x-col>
        <x-col :span="14">
          <x-row class="text-content text-content-top">
            <x-col :offset="2" :span="item.span" v-for="item in info">
              <text-box
                title-place="bottom"
                :title="item.title"
                :value="item.value"
                :unit="item.unit"
                :type="item.type"
                number-font-size="22px">
              </text-box>
            </x-col>
          </x-row>
          <x-row class="text-content text-content-bottom">
            <x-col :offset="2" :span="item.span" v-for="item in info2">
              <text-box
                title-place="bottom"
                :title="item.title"
                :value="item.value"
                :unit="item.unit"
                :type="item.type"
                number-font-size="22px"
                >
              </text-box>
            </x-col>
          </x-row>
        </x-col>
        
      </div>
    </div>
  </panel>
</template>

<script>
import formatDate from 'filters/format-date'
export default {
  name: 'stree',

  data () {
    return {
      chartWidth: '100px',
      chartHeight: '100px'
      // datas: [
      //   {
      //     name: '北一区',
      //     type: 1
      //   },
      //   {
      //     name: '北二区',
      //     type: 1
      //   },
      //   {
      //     name: '南一区',
      //     type: 1
      //   },
      //   {
      //     name: '南二区',
      //     type: 1
      //   }
      // ]
    }
  },

  mounted () {
    setTimeout(this.initialize, 0)
    // this.$store.dispatch('updateStreeMonitor')
    this.requestRestfulData()
  },
  computed: {
    info () {
      if (!this.$store.getters.streeMonitor) {
        return [{
          title: '土壤养分',
          unit: `A级`,
          span: 12,
          type: 'green'
        }, {
          title: '土壤湿度',
          unit: '35％',
          span: 12
        }]
      }
      let res = _.clone(this.$store.getters.streeMonitor)
      let color = {
        'A': 'green',
        'B': 'blue',
        'C': 'orange',
        'D': 'danger',
        'E': 'brownRed'
      }
      for (let i in color) {
        if (i === res.SoilNutrient) {
          res['color'] = color[i]
        }
      }
      return [{
        title: '土壤养分',
        unit: `${res.SoilNutrient}级`,
        span: 12,
        type: res.color
      }, {
        title: '土壤湿度',
        value: res.SoilHumidity,
        unit: '％',
        span: 12
      }]
    },
    info2 () {
      if (!this.$store.getters.streeMonitor) {
        return [{
          title: '环境温度',
          unit: '32℃',
          span: 12
        }, {
          title: '环境湿度',
          unit: '60％',
          span: 12
        }]
      }
      let res = _.clone(this.$store.getters.streeMonitor)
      return [{
        title: '环境温度',
        value: res.EnvTemperature,
        unit: '℃',
        span: 12
      }, {
        title: '环境湿度',
        value: res.EnvHumidity,
        unit: '％',
        span: 12
      }]
    },
    streeArea () {
      return '水蒲桃'
      // if (!this.$store.getters.streeMonitor) {
      //   return '-'
      // }
      // return this.$store.getters.streeMonitor.DeviceName
    },
    streeOnline () {
      // if (!this.$store.getters.streeStatus) {
      //   return '离线'
      // }
      // return this.$store.getters.streeStatus === 1 ? '在线' : '离线'
      return '在线'
    },
    streeCreateTime () {
      if (!this.$store.getters.streeMonitor) {
        return formatDate(new Date(), 'yyyy-MM-dd hh:mm', true)
      }
      return this.$store.getters.streeMonitor.CreateDate
      // return formatDate(new Date(), 'yyyy-MM-dd hh:mm', true)
    }
  },
  methods: {
    initialize () {
      this.chartWidth = `${this.$el.clientWidth - 40}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
    },
    requestRestfulData () {
      this.$store.dispatch('updateStreeMonitor')
      this.$store.dispatch('updateStreeStatus')
    }
  }
}
</script>

<style lang="stylus" scoped>

.stree-data-create-time
  float right

  .danger
    color red
  .door-control-rool
    width 100%
    height 100%
    position relative
    .door-control-content
      margin-left 10px
      margin-top 15px
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
      width 80%
      height 70%

      .door
        display inline-block
        position relative
        width 44.9%
        height 50%
        margin-right 5%
        margin-top 1%

    .door
      .position-state-box
        position absolute
        top 50%
        left 0px
        transform translate(0, -50%)
        width 100%
        height 60px
        line-height 25px
        padding-left 60px
        box-sizing border-box

        .position-state
          color #3EC053
      .icon
        position absolute
        top 50%
        left 0px
        transform translate(0, -50%)
        width 60px
        height 60px
        background no-repeat url('../../../../assets/images/door.png') left center / 50px auto

.middle-area
  margin-top 10%
  font-size normal
  .text-content-top
    padding-bottom 10%
    width initial
    font-weight 100
    margin 0 20px
    border-bottom 1px dashed #eee
  .text-content-bottom
    padding-top 10%
    width initial
    font-weight 100
    margin 0 20px
.middle-area-stree
  margin-top 7%
  box-sizing border-box
  padding-left 2%
  .middle-area-stree-status
    margin-top 5%
    .middle-area-stree-area
      margin-bottom 10%
      font-size 18px
      font-weight 100
      color rgba(62, 193, 82, 1)
    .middle-area-stree-online
      font-size 18px
      font-weight 100
.stree-img
  width 100%

</style>
